import React, { Component } from "react";
// NavLink它能做Link的所有事情，并增加了添加类名的功能
import { Route, Switch, Redirect, NavLink } from "react-router-dom";
import "./09-style.css";

class Home extends Component {
  render() {
    return <div>这是首页页面</div>;
  }
}

const About = () => {
  return <div>这是关于页面</div>;
};

class App extends Component {
  render() {
    return (
      <>
        <h2>导航高亮</h2>
        <ul>
          <li>
            {/* navlink组件会在被选中的那个元素上面添加active类名 */}
            {/* activeClassName可以修改默认类名 */}
            {/* NavLink默认也是模糊匹配 */}
            <NavLink to="/" activeClassName="select" exact>
              首页
            </NavLink>
          </li>
          <li>
            <NavLink to="/about" activeClassName="select">
              关于页
            </NavLink>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* <Redirect from="/" to="/home" exact></Redirect> */}
          <Route path="/" component={Home}></Route>
          <Route path="/about" component={About}></Route>
        </Switch>
      </>
    );
  }
}

export default App;
